{% extends "baseMenuMapa.html" %}
{% load crispy_forms_tags %}

{% block extras %}
{% if error %} <div><font color="red" size=2>Error: {{ error }}</font></div>{% endif %}
<div class="span8">
	<div id="mapas" style="width:100%; height:350px;">Aca va el mapa</div>
</div>
<div class="span2">
	{% crispy form %}
</div>
{% endblock %}

{% block funcDblClick %}
function mostrarCoordenadas(location, map) { //funcion javascript
	document.getElementById("id_latitud").value = location.lat();
	document.getElementById("id_longitud").value = location.lng();
    };
{% endblock %}
   
{% block defFuncDblClick %}
        	map.setCenter(event.latLng);  
			if (marker == null)  
	            marker = new google.maps.Marker({
	                map:map,
	                draggable:true,
	                position: event.latLng,
	                icon: markerImage3
	            });
            else
            	marker.setPosition(event.latLng);
            mostrarCoordenadas(event.latLng,map);
{% endblock %}

{% block marcas %}
	document.getElementById("id_action").value = document.location.search.substr(1);
	
    {% if stopList %}
    {% for stop in stopList %}
    markerPosition = new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}});
        marker = new google.maps.Marker({
        map:map,
        draggable:false,
        position: markerPosition,
        title: "Parada: {{ stop.calle1 }} {% if stop.calle2 %}& {{ stop.calle2 }} {% endif %} ({{ stop.orden }})",
        {% if stop.paradaactiva %}
        icon: markerImage
        {% else %}
        icon: markerImage2
        {% endif%}
    });
	limits.extend(markerPosition);
	        
    google.maps.event.addListener(marker, 'click', function(event) {
    	var message = "La posicion es Latitud "+ event.latLng.lat() + "y longitud " + event.latLng.lng();
 		var infowindow = new google.maps.InfoWindow(
      		{ content: message,
       			size: new google.maps.Size(50,50)
      		});
   		infowindow.open(map,marker);
  	}); //Click sobre el marker
	
	google.maps.event.addListener(marker, 'dragend', function(event) {
        mostrarCoordenadas(event.latLng, map);
    });
    {% endfor %}
    
    var flightPlanCoordinates = [
      {% for stop in stopList %}
	    new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}}),
      {% endfor %}
	];
	var flightPath = new google.maps.Polyline({
	    path: flightPlanCoordinates,
	    strokeColor: "#FF0000",
	    strokeOpacity: 1.0,
	    strokeWeight: 2
	});

 	flightPath.setMap(map);
    {% endif %}   
{% endblock %}
